<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { SecondHandItemApi } from '@/api/SecondHandItemApi.js';
import { MarketItemApi } from '@/api/new/MarketItemApi.ts';
import { UserProfileApi } from '@/api/new/userProfleApi.js';
import { ElMessage, ElLoading } from 'element-plus';
import { Search, Filter, ArrowDown, Star, Share, ShoppingCart, Flag, Wallet, Refresh } from '@element-plus/icons-vue';

const router = useRouter();

// 搜索关键字
const searchKeyword = ref('');

// 商品列表
const goodsList = ref([]);

// 精选商品
const featuredGoods = ref([]);

// 最近上新商品
const newArrivals = ref([]);

// 热门分类
const categories = reactive([
  { name: '露营装备', icon: '🏕️', count: 120 },
  { name: '登山用品', icon: '⛰️', count: 85 },
  { name: '徒步装备', icon: '🥾', count: 64 },
  { name: '骑行装备', icon: '🚴', count: 73 },
  { name: '水上运动', icon: '🚣', count: 42 },
  { name: '摄影器材', icon: '📷', count: 56 }
]);

// 筛选选项
const filterOptions = reactive({
  priceRange: [0, 5000],
  condition: '全部', // 全部, 全新, 9成新, 8成新以下
  sortBy: 'newest', // newest, priceAsc, priceDesc, popular
});

// 加载状态
const loading = ref(true);

// 默认图片
const defaultImage = 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png';
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

// 作者信息缓存
const sellerCache = ref({});

// 活动信息
const activities = reactive([
  { title: '春季换新', description: '出手闲置装备，换取新春心情', image: 'https://img.redocn.com/sheying/20141013/chuntiandengshan_3214561.jpg' },
  { title: '限时特惠', description: '精选二手商品，低至5折起', image: 'https://img95.699pic.com/photo/60032/6410.jpg_wh860.jpg' },
  { title: '信誉保障', description: '交易全程保障，安心买卖', image: 'https://www.2008php.com/2020_Website_appreciate/2020-10-22/20201022192600.jpg' }
]);

// 进入发布页面
const goSecondHandPublishPage = () => {
  router.push({ name: 'push.secondhand' });
}

// 获取卖家信息
const fetchSellerInfo = async (sellerId) => {
  // 如果缓存中已有该卖家信息，直接返回
  if (sellerCache.value[sellerId]) {
    return sellerCache.value[sellerId];
  }

  try {
    // 使用UserProfileApi获取用户信息
    const userData = await UserProfileApi.getUserInfo(sellerId);

    // 缓存卖家信息
    sellerCache.value[sellerId] = {
      username: userData.username || '未知用户',
      headshot: userData.headshot || defaultAvatar
    };

    return sellerCache.value[sellerId];
  } catch (error) {
    console.error(`获取卖家 ${sellerId} 信息失败:`, error);
    // 返回默认信息
    return {
      username: '未知用户',
      headshot: defaultAvatar
    };
  }
};

// 获取商品列表
const fetchGoodsList = async () => {
  loading.value = true;
  try {
    const response = await SecondHandItemApi.getAllSecondHandItems();
    const items = response.data || [];

    // 获取每个商品的第一张图片和卖家信息
    const itemsWithDetails = await Promise.all(
      items.map(async (item) => {
        try {
          // 并行获取商品图片和卖家信息
          const [imageResponse, sellerInfo] = await Promise.all([
            MarketItemApi.getItemImages(item.itemID),
            fetchSellerInfo(item.sellerID)
          ]);

          let imageUrl = defaultImage;

          // 检查返回的图片数据
          if (imageResponse && Array.isArray(imageResponse) && imageResponse.length > 0) {
            // 使用第一张图片
            imageUrl = imageResponse[0].imageUrl;
          } else if (imageResponse && imageResponse.imageUrl) {
            // 如果直接返回单个图片对象
            imageUrl = imageResponse.imageUrl;
          } else if (imageResponse && imageResponse.data && imageResponse.data.imageUrl) {
            // 嵌套数据结构
            imageUrl = imageResponse.data.imageUrl;
          }

          // 增加一些模拟数据以丰富UI展示
          const randomViews = Math.floor(Math.random() * 500) + 50;
          const randomLikes = Math.floor(Math.random() * 50) + 5;
          const randomCondition = ['全新', '9成新', '8成新', '7成新', '6成新'][Math.floor(Math.random() * 5)];

          return {
            ...item,
            imageUrl,
            sellerName: sellerInfo.username,
            sellerAvatar: sellerInfo.headshot,
            createTime: item.creationTime || new Date().toISOString(),
            views: randomViews,
            likes: randomLikes,
            condition: randomCondition
          };
        } catch (error) {
          console.error(`获取商品 ${item.itemID} 详情失败:`, error);
          return {
            ...item,
            imageUrl: defaultImage,
            sellerName: '未知用户',
            sellerAvatar: defaultAvatar,
            createTime: item.creationTime || new Date().toISOString(),
            views: 100,
            likes: 10,
            condition: '未知'
          };
        }
      })
    );

    // 根据排序选项排序商品
    sortItems(itemsWithDetails);

    // 设置精选商品 (随机选取4个)
    featuredGoods.value = [...itemsWithDetails]
      .sort(() => 0.5 - Math.random())
      .slice(0, 4);

    // 设置最新上新商品 (取最新的6个)
    newArrivals.value = [...itemsWithDetails]
      .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
      .slice(0, 6);

  } catch (error) {
    console.error('获取商品列表失败:', error);
    ElMessage.error('获取商品列表失败，请稍后重试');
    goodsList.value = [];
  } finally {
    loading.value = false;
  }
};

// 根据筛选条件排序商品
const sortItems = (items) => {
  let sortedItems = [...items];

  // 先按价格区间筛选
  if (filterOptions.priceRange && filterOptions.priceRange.length === 2) {
    const [min, max] = filterOptions.priceRange;
    sortedItems = sortedItems.filter(item =>
      item.price >= min && item.price <= max
    );
  }

  // 按商品状态筛选
  if (filterOptions.condition !== '全部') {
    sortedItems = sortedItems.filter(item =>
      item.condition === filterOptions.condition
    );
  }

  // 根据排序选项排序
  switch (filterOptions.sortBy) {
    case 'newest':
      sortedItems.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
      break;
    case 'priceAsc':
      sortedItems.sort((a, b) => a.price - b.price);
      break;
    case 'priceDesc':
      sortedItems.sort((a, b) => b.price - a.price);
      break;
    case 'popular':
      sortedItems.sort((a, b) => b.views - a.views);
      break;
  }

  goodsList.value = sortedItems;
};

// 搜索商品
const searchGoods = () => {
  if (!searchKeyword.value.trim()) {
    fetchGoodsList();
    return;
  }

  const keyword = searchKeyword.value.toLowerCase();
  const filteredGoods = goodsList.value.filter(item =>
    item.title.toLowerCase().includes(keyword) ||
    item.description.toLowerCase().includes(keyword) ||
    item.sellerName.toLowerCase().includes(keyword)
  );

  goodsList.value = filteredGoods;

  if (filteredGoods.length === 0) {
    ElMessage.info('没有找到符合条件的商品');
  }
};

// 更新筛选条件
const updateFilter = (type, value) => {
  filterOptions[type] = value;
  fetchGoodsList();
};

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return '未知时间';

  const now = new Date();
  const time = new Date(timeStr);
  const diff = Math.floor((now - time) / 1000); // 秒数差

  if (diff < 60) {
    return '刚刚';
  } else if (diff < 3600) {
    return Math.floor(diff / 60) + '分钟前';
  } else if (diff < 86400) {
    return Math.floor(diff / 3600) + '小时前';
  } else if (diff < 2592000) {
    return Math.floor(diff / 86400) + '天前';
  } else {
    return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`;
  }
};

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case 'forSale':
      return 'success';
    case 'inTransaction':
      return 'warning';
    case 'sold':
      return 'info';
    default:
      return '';
  }
};

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'forSale':
      return '在售';
    case 'inTransaction':
      return '已预订';
    case 'sold':
      return '已售出';
    default:
      return '未知';
  }
};

// 跳转到详情页
const goToDetail = (itemID) => {
  router.push(`/secondhand/detail/${itemID}`);
};

// 跳转到用户个人页面
const goToUserProfile = (userId) => {
  if (!userId) return;

  router.push({
    path: '/otherUser',
    query: { userId }
  });
};

// 模拟获取更多商品
const loadMore = () => {
  const loadingInstance = ElLoading.service({
    text: '加载更多商品...',
    background: 'rgba(255, 255, 255, 0.7)'
  });

  setTimeout(() => {
    loadingInstance.close();
    ElMessage.info('已加载全部商品');
  }, 1500);
};

// 处理搜索
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词');
    return;
  }
  
  // 跳转到搜索页面，并传递搜索关键词
  router.push({
    path: '/secondhand/search',
    query: { keyword: searchKeyword.value.trim() }
  });
};

// 生命周期钩子
onMounted(() => {
  fetchGoodsList();
});
</script>

<template>
  <div class="secondhand-publicity-container">
    <!-- 顶部横幅 -->
    <section class="hero-banner">
      <div class="banner-overlay"></div>
      <div class="banner-content">
        <h1 class="banner-title">二手集市 • 环保先行</h1>
        <p class="banner-subtitle">高品质二手户外装备，为您的旅程助力，为地球减负</p>
        <div class="search-container">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索心仪的户外装备..."
            class="search-input"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
    </section>

    <!-- 优势说明区 -->
    <section class="benefits-section">
      <div class="benefit-item">
        <div class="benefit-icon">
          <el-icon><Wallet /></el-icon>
        </div>
        <div class="benefit-text">
          <h3>极致性价比</h3>
          <p>高品质装备，低至3折起</p>
        </div>
      </div>
      <div class="benefit-item">
        <div class="benefit-icon">
          <el-icon><Flag /></el-icon>
        </div>
        <div class="benefit-text">
          <h3>品质保障</h3>
          <p>严格品质审核，真实详细描述</p>
        </div>
      </div>
      <div class="benefit-item">
        <div class="benefit-icon">
          <el-icon><ShoppingCart /></el-icon>
        </div>
        <div class="benefit-text">
          <h3>安全交易</h3>
          <p>平台担保交易，买卖无忧</p>
        </div>
      </div>
      <div class="benefit-item">
        <div class="benefit-icon">
          <el-icon><Refresh /></el-icon>
        </div>
        <div class="benefit-text">
          <h3>环保循环</h3>
          <p>二手再利用，绿色可持续</p>
        </div>
      </div>
    </section>

    <!-- 精选推荐 -->
    <section class="featured-section">
      <div class="section-header">
        <h2 class="section-title">精选推荐</h2>
        <p class="section-subtitle">Quality Picks For You</p>
      </div>

      <div class="featured-grid">
        <div
          v-for="item in featuredGoods"
          :key="item.itemID"
          class="featured-item"
          @click="goToDetail(item.itemID)"
        >
          <div class="featured-image">
            <img :src="item.imageUrl" :alt="item.title">
            <div class="item-tag">{{ item.condition }}</div>
          </div>
          <div class="featured-content">
            <h3 class="featured-title">{{ item.title }}</h3>
            <div class="featured-price">¥{{ item.price }}</div>
            <div class="featured-meta">
              <span class="item-views"><el-icon><View /></el-icon> {{ item.views }}</span>
              <span class="item-time">{{ formatTime(item.createTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 活动展示 -->
    <section class="activities-section">
      <div class="activities-grid">
        <div v-for="(activity, index) in activities" :key="index" class="activity-card">
          <div class="activity-image">
            <img :src="activity.image" :alt="activity.title">
          </div>
          <div class="activity-overlay"></div>
          <div class="activity-content">
            <h3 class="activity-title">{{ activity.title }}</h3>
            <p class="activity-desc">{{ activity.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 商品浏览区 -->
    <section class="browse-section">
      <div class="browse-header">
        <h2 class="section-title">浏览商品</h2>
        <p class="section-subtitle">Browse Items</p>
      </div>

      <div class="browse-container">
        <!-- 侧边栏分类和筛选 -->
        <aside class="sidebar">
          <div class="filter-group">
            <h3 class="filter-title">商品分类</h3>
            <div class="categories-list">
              <div class="category-item" v-for="category in categories" :key="category.name">
                <span class="category-icon">{{ category.icon }}</span>
                <span class="category-name">{{ category.name }}</span>
                <span class="category-count">{{ category.count }}</span>
              </div>
            </div>
          </div>

          <div class="filter-group">
            <h3 class="filter-title">价格区间</h3>
            <el-slider
              v-model="filterOptions.priceRange"
              range
              :min="0"
              :max="5000"
              @change="() => updateFilter('priceRange', filterOptions.priceRange)"
            />
            <div class="price-range-display">
              <span>¥{{ filterOptions.priceRange[0] }}</span>
              <span>¥{{ filterOptions.priceRange[1] }}</span>
            </div>
          </div>

          <div class="filter-group">
            <h3 class="filter-title">排序方式</h3>
            <div class="sort-options">
              <el-select v-model="filterOptions.sortBy" @change="() => updateFilter('sortBy', filterOptions.sortBy)">
                <el-option label="最新发布" value="newest"></el-option>
                <el-option label="价格从低到高" value="priceAsc"></el-option>
                <el-option label="价格从高到低" value="priceDesc"></el-option>
                <el-option label="热门优先" value="popular"></el-option>
              </el-select>
            </div>
          </div>
        </aside>

        <!-- 商品列表 -->
        <div class="goods-grid">
          <div class="loading-placeholder" v-if="loading">
            <el-skeleton :rows="5" animated />
          </div>

          <template v-else>
            <div
              v-for="item in goodsList"
              :key="item.itemID"
              class="goods-card"
              @click="goToDetail(item.itemID)"
            >
              <div class="goods-image">
                <img :src="item.imageUrl" :alt="item.title">
                <div class="goods-status" :class="getStatusType(item.status)">
                  {{ getStatusText(item.status) }}
                </div>
                <div class="goods-condition">{{ item.condition }}</div>
              </div>
              <div class="goods-content">
                <h3 class="goods-title">{{ item.title }}</h3>
                <p class="goods-desc">{{ item.description }}</p>
                <div class="goods-price">¥{{ item.price }}</div>
                <div class="goods-meta">
                  <div class="seller-info" @click.stop="goToUserProfile(item.sellerID)">
                    <img :src="item.sellerAvatar" :alt="item.sellerName" class="seller-avatar">
                    <span class="seller-name">{{ item.sellerName }}</span>
                  </div>
                  <span class="goods-time">{{ formatTime(item.createTime) }}</span>
                </div>
                <div class="goods-stats">
                  <span class="stats-item"><el-icon><Star /></el-icon> {{ item.likes }}</span>
                  <span class="stats-item"><el-icon><View /></el-icon> {{ item.views }}</span>
                </div>
              </div>
            </div>

            <div class="empty-state" v-if="goodsList.length === 0">
              <el-empty description="暂无符合条件的商品" />
            </div>
          </template>
        </div>
      </div>

      <!-- 加载更多按钮 -->
      <div class="load-more-container">
        <el-button class="load-more-btn" @click="loadMore">加载更多</el-button>
      </div>
    </section>

    <!-- 新品上架 -->
    <section class="new-arrivals-section">
      <div class="section-header">
        <h2 class="section-title">新品上架</h2>
        <p class="section-subtitle">New Arrivals</p>
      </div>

      <div class="arrivals-slider">
        <div
          v-for="item in newArrivals"
          :key="item.itemID"
          class="arrival-item"
          @click="goToDetail(item.itemID)"
        >
          <div class="arrival-image">
            <img :src="item.imageUrl" :alt="item.title">
            <div class="arrival-tag">新品</div>
          </div>
          <div class="arrival-content">
            <h3 class="arrival-title">{{ item.title }}</h3>
            <div class="arrival-price">¥{{ item.price }}</div>
            <div class="arrival-seller">
              <img :src="item.sellerAvatar" :alt="item.sellerName" class="seller-avatar-small">
              <span>{{ item.sellerName }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 加入我们区域 -->
    <section class="join-us-section">
      <div class="join-overlay"></div>
      <div class="join-content">
        <h2 class="join-title">加入二手集市，变废为宝</h2>
        <p class="join-text">闲置装备换成现金，让物品找到新主人，环保且实惠</p>
        <el-button type="primary" class="join-button" size="large" @click="goSecondHandPublishPage">立即发布闲置</el-button>
      </div>
    </section>
  </div>
</template>

<style scoped lang="less">
// 基础变量
@primary-color: #10b981; // 绿色主题，体现环保
@secondary-color: #0ea5e9;
@accent-color: #f59e0b;
@text-color: #333;
@light-text: #666;
@background-light: #f9fafb;
@background-dark: #1f2937;
@card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
@transition: all 0.3s ease;

// 全局样式
.secondhand-publicity-container {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  color: @text-color;
  padding: 0 0 50px;
}

// 通用部分标题样式
.section-header {
  text-align: center;
  margin-bottom: 30px;

  .section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    display: inline-block;

    &::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: @primary-color;
      border-radius: 3px;
    }
  }

  .section-subtitle {
    color: @light-text;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
  }
}

// 顶部横幅
.hero-banner {
  height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('https://pic.52112.com/171222/Pedestrian/BX1TSIuunO.jpg');
  background-size: cover;
  background-position: center;
  margin-bottom: 40px;

  .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
  }

  .banner-content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;

    .banner-title {
      font-size: 3.5rem;
      font-weight: 800;
      margin-bottom: 15px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .banner-subtitle {
      font-size: 1.2rem;
      margin-bottom: 30px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .search-container {
      display: flex;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;

      .search-input {
        flex: 1;

        :deep(.el-input__wrapper) {
          padding-left: 15px;
          height: 50px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
      }

      .el-button {
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding: 0 25px;
        background-color: @primary-color;
        border-color: @primary-color;

        &:hover {
          background-color: darken(@primary-color, 5%);
          border-color: darken(@primary-color, 5%);
          opacity: 0.9;
        }
      }
    }
  }
}

// 优势说明区域
.benefits-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  padding: 0 5% 50px;

  .benefit-item {
    display: flex;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: @card-shadow;
    transition: @transition;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .benefit-icon {
      width: 60px;
      height: 60px;
      background: fade(@primary-color, 15%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;

      .el-icon {
        font-size: 28px;
        color: @primary-color;
      }
    }

    .benefit-text {
      h3 {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 5px;
      }

      p {
        color: @light-text;
        font-size: 0.9rem;
      }
    }
  }
}

// 精选推荐区域
.featured-section {
  padding: 50px 5%;
  background-color: @background-light;

  .featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;

    .featured-item {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: @card-shadow;
      transition: @transition;
      cursor: pointer;

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

        .featured-image img {
          transform: scale(1.05);
        }
      }

      .featured-image {
        position: relative;
        height: 200px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        .item-tag {
          position: absolute;
          top: 10px;
          left: 10px;
          background: @primary-color;
          color: white;
          padding: 4px 12px;
          border-radius: 4px;
          font-size: 0.8rem;
          font-weight: 500;
        }
      }

      .featured-content {
        padding: 15px;

        .featured-title {
          font-size: 1.1rem;
          font-weight: 600;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .featured-price {
          color: #e5534b;
          font-size: 1.3rem;
          font-weight: 700;
          margin-bottom: 10px;
        }

        .featured-meta {
          display: flex;
          justify-content: space-between;
          color: @light-text;
          font-size: 0.9rem;

          .item-views, .item-time {
            display: flex;
            align-items: center;

            .el-icon {
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
}

// 活动展示区域
.activities-section {
  padding: 0 5% 60px;

  .activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;

    .activity-card {
      position: relative;
      height: 200px;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;

      &:hover {
        .activity-image img {
          transform: scale(1.05);
        }

        .activity-overlay {
          background: rgba(0, 0, 0, 0.5);
        }
      }

      .activity-image {
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }
      }

      .activity-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        transition: background 0.3s ease;
      }

      .activity-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        color: white;

        .activity-title {
          font-size: 1.5rem;
          font-weight: 700;
          margin-bottom: 8px;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .activity-desc {
          font-size: 0.95rem;
          opacity: 0.9;
        }
      }
    }
  }
}

// 商品浏览区域
.browse-section {
  padding: 60px 5%;

  .browse-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
    margin-bottom: 40px;

    @media (max-width: 992px) {
      grid-template-columns: 1fr;
    }

    // 侧边栏样式
    .sidebar {
      .filter-group {
        background: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: @card-shadow;

        .filter-title {
          font-size: 1.1rem;
          font-weight: 600;
          margin-bottom: 15px;
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
        }

        .categories-list {
          .category-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            cursor: pointer;
            transition: @transition;

            &:hover {
              color: @primary-color;
            }

            .category-icon {
              font-size: 1.2rem;
              margin-right: 10px;
            }

            .category-name {
              flex: 1;
            }

            .category-count {
              background: #f3f4f6;
              padding: 2px 8px;
              border-radius: 10px;
              font-size: 0.8rem;
              color: @light-text;
            }
          }
        }

        .price-range-display {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          color: @light-text;
          font-size: 0.9rem;
        }

        .condition-options {
          .el-radio {
            margin-right: 0;
            margin-bottom: 10px;
            display: block;
          }
        }

        .sort-options {
          .el-select {
            width: 100%;
          }
        }
      }
    }

    // 商品列表样式
    .goods-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;

      .loading-placeholder {
        grid-column: 1 / -1;
        padding: 20px;
        background: white;
        border-radius: 10px;
        box-shadow: @card-shadow;
      }

      .empty-state {
        grid-column: 1 / -1;
        padding: 50px 0;
      }

      .goods-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: @card-shadow;
        transition: @transition;
        cursor: pointer;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);

          .goods-image img {
            transform: scale(1.08);
          }
        }

        .goods-image {
          position: relative;
          height: 220px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
          }

          .goods-status {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 500;
            color: white;
            background: @primary-color;
            z-index: 2;

            &.warning {
              background: @accent-color;
            }

            &.info {
              background: @secondary-color;
            }
          }

          .goods-condition {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
          }
        }

        .goods-content {
          padding: 20px;

          .goods-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .goods-desc {
            color: @light-text;
            font-size: 0.9rem;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 40px;
          }

          .goods-price {
            color: #e5534b;
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 15px;
          }

          .goods-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            margin-bottom: 10px;

            .seller-info {
              display: flex;
              align-items: center;

              .seller-avatar {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                margin-right: 8px;
                object-fit: cover;
              }

              .seller-name {
                color: @light-text;
              }
            }

            .goods-time {
              color: @light-text;
            }
          }

          .goods-stats {
            display: flex;
            gap: 15px;

            .stats-item {
              display: flex;
              align-items: center;
              color: @light-text;
              font-size: 0.85rem;

              .el-icon {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }

  // 加载更多按钮
  .load-more-container {
    text-align: center;
    margin-top: 20px;

    .load-more-btn {
      padding: 10px 40px;
      font-size: 1rem;
      border-radius: 30px;
      background-color: white;
      border: 1px solid #ddd;
      color: @text-color;
      transition: @transition;

      &:hover {
        background-color: #f5f5f5;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }
    }
  }
}

// 新品上架区域
.new-arrivals-section {
  padding: 60px 5%;
  background-color: @background-light;

  .arrivals-slider {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;

    .arrival-item {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: @card-shadow;
      transition: @transition;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

        .arrival-image img {
          transform: scale(1.05);
        }
      }

      .arrival-image {
        position: relative;
        height: 180px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        .arrival-tag {
          position: absolute;
          top: 10px;
          right: 10px;
          background: #e5534b;
          color: white;
          padding: 4px 10px;
          border-radius: 4px;
          font-size: 0.8rem;
          font-weight: 500;
        }
      }

      .arrival-content {
        padding: 15px;

        .arrival-title {
          font-size: 1rem;
          font-weight: 600;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .arrival-price {
          color: #e5534b;
          font-size: 1.2rem;
          font-weight: 700;
          margin-bottom: 10px;
        }

        .arrival-seller {
          display: flex;
          align-items: center;
          font-size: 0.85rem;
          color: @light-text;

          .seller-avatar-small {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 6px;
            object-fit: cover;
          }
        }
      }
    }
  }
}

// 加入我们区域
.join-us-section {
  position: relative;
  padding: 80px 5%;
  margin-top: 60px;
  background-image: url('https://images.pexels.com/photos/6187603/pexels-photo-6187603.jpeg?auto=compress&cs=tinysrgb&w=1600');
  background-size: cover;
  background-position: center;
  color: white;

  .join-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(16, 185, 129, 0.8), rgba(5, 150, 105, 0.9));
  }

  .join-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;

    .join-title {
      font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: 15px;
    }

    .join-text {
      font-size: 1.2rem;
      margin-bottom: 30px;
      opacity: 0.9;
    }

    .join-button {
      background-color: white;
      color: @primary-color;
      border: none;
      font-size: 1.1rem;
      font-weight: 600;
      padding: 12px 40px;
      border-radius: 30px;
      transition: @transition;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

// 响应式样式
@media (max-width: 768px) {
  .hero-banner {
    height: 400px;

    .banner-content {
      .banner-title {
        font-size: 2.5rem;
      }
    }
  }

  .benefits-section {
    grid-template-columns: 1fr;
  }

  .activities-section .activities-grid {
    grid-template-columns: 1fr;
  }

  .new-arrivals-section .arrivals-slider {
    grid-template-columns: repeat(2, 1fr);
  }

  .join-us-section .join-content {
    .join-title {
      font-size: 2rem;
    }
  }
}

@media (max-width: 576px) {
  .featured-section .featured-grid,
  .browse-section .browse-container .goods-grid {
    grid-template-columns: 1fr;
  }

  .new-arrivals-section .arrivals-slider {
    grid-template-columns: 1fr;
  }
}
</style>
